<template>
  <a-col :span="opt.total">
    <a-form-item
      v-bind="$attrs"
      :name="name"
      :label-col="{ span: opt.labelWidth, class: labelClass }"
      :wrapper-col="{ span: opt.wrapperWidth, offset: opt.offsetWidth }"
    >
      <template #label>
        <template v-if="displayTitle">
          <template v-if="tip">
            {{ label }}
            <a-tooltip>
              <template #title>
                {{ tip }}
              </template>
              <s-icon type="question-circle-outlined" :style="{ color: 'red' }" />
            </a-tooltip>
          </template>
          <template v-else>
            {{ label }}
          </template>
        </template>
      </template>
      <slot />
    </a-form-item>
  </a-col>
</template>

<script>
import { getCurrentInstance, inject } from 'vue'

export default {
  name: 'SFormItem',
  props: {
    displayTitle: {
      type: Boolean,
      require: false,
      default: () => {
        return true
      }
    },
    label: {
      type: String,
      require: false,
      default: ''
    },
    name: {
      type: String,
      require: false
    },
    tip: {
      type: String,
      require: false,
      default: ''
    },
    labelClass: {
      type: String,
      require: false,
      default: ''
    },
    size: {
      type: String,
      require: false,
      default: 'middle'
    },
    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup(props, context) {
    const { proxy } = getCurrentInstance()
    const hooks = []
    if (props.name) {
      let parent = proxy.$parent
      let key = null
      while (true) {
        if (!parent) {
          break
        }
        if (parent.$ && parent.$.type.name == 'ATabPane') {
          key = parent.tabKey
        }
        if (parent.$ && parent.$.type.name == 'STabs') {
          if (key) {
            const hook = inject(parent.tabHookName)
            hooks.push({
              hook: hook,
              key: key
            })
          }
          key = null
          break
        }
        if (parent.$ && parent.$.type.name == 'AForm') {
          break
        }
        parent = parent.$parent
      }
      hooks.forEach((item) => {
        item.hook.register(item.key, props.name)
      })
    }
    return { hooks: hooks }
  },
  data() {
    return { opt: this.init() }
  },
  watch: {
    size() {
      this.opt = this.init()
    },
    options() {
      this.opt = this.init()
    }
  },
  beforeUnmount() {
    this.hooks.forEach((item) => {
      const key = item.key
      item.hook.register(key, this.name)
    })
  },
  methods: {
    init() {
      switch (this.size) {
        case 'list-small':
          return {
            labelWidth: 5,
            wrapperWidth: 18,
            offsetWidth: 1,
            total: 4
          }
        case 'list-middle':
          return {
            labelWidth: 5,
            wrapperWidth: 18,
            offsetWidth: 1,
            total: 6
          }
        case 'list-big':
          return {
            labelWidth: 5,
            wrapperWidth: 18,
            offsetWidth: 1,
            total: 8
          }
        case 'small':
          return {
            labelWidth: 6,
            wrapperWidth: 16,
            offsetWidth: 2,
            total: 8
          }
        case 'middle':
          return {
            labelWidth: 6,
            wrapperWidth: 16,
            offsetWidth: 2,
            total: 12
          }
        case 'big':
          return {
            labelWidth: 3,
            wrapperWidth: 20,
            offsetWidth: 1,
            total: 24
          }
        case 'custom':
          return this.options
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
